<template>
  <MainContent title="营销模型" :defaultContentSlot="false" back>
    <template #top>
      <el-card>
        <div class="model-header">
          <div class="header-content" ref="headerContent">
            <div class="content-item" v-for="(item, index) in titleList" :key="index">
              <!-- <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start">
                
              </el-tooltip> -->
              <span v-if="index !== 0 && index + 1 !== titleList.length" class="item"
                :class="{ 'activity': itemIndex == index }" @click="setCanvasList($event, item, index)">{{
                    item.name
                }}</span>
              <span v-if="index == 0 || index + 1 == titleList.length" class="item">{{ item.name }}</span>
              <!-- <el-icon v-if="!(titleList.length == index + 1)" class="item-icon">
                <ArrowRight />
              </el-icon> -->
              <img class="item-icon" v-if="!(titleList.length == index + 1)" src="@/assets/images/Icon-zhixiang.png"
                alt="">
            </div>
          </div>
        </div>
      </el-card>
    </template>
    <template #default>
      <div v-loading="loading">
        <div class="model-content">
          <el-button @click="$router.push(`/flow/auto/marketingProcess/workTable`)" type="primary" icon="Plus">新建</el-button>
          <div class="content-box">
            <div v-for="(item, index) in canvasList" :key="index">
              <div class="content-title">
                <span class="icon-left"></span>
                <span class="title">已执行周期{{ getDay(item.publishTime) }}天</span>
              </div>
              <el-card class="el-card-box" shadow="hover" @click="$router.push(`/flow/auto/marketingProcess/processDetail?id=${item.id}`)">
                <div class="card-left">
                  <div>
                    <span class="top-name">{{ item.name }}</span>
                    <el-tag v-if="item.status == '-2'">
                      <img class="tag-img" src="@/assets/images/icon-Finish.png" /><span>已结束</span>
                    </el-tag>
                    <el-tag v-if="item.status == '1' || item.status == '2'" type="success"><img class="tag-img"
                        src="@/assets/images/icon-success.png" alt="" /><span>进行中</span></el-tag>
                    <el-tag v-if="item.status == '-1'" type="warning"><img class="tag-img"
                        src="@/assets/images/icon-pause.png" alt="" /><span>暂停中</span></el-tag>
                  </div>
                  <div class="bottom">
                    <span v-if="item.startType == '1'">单次执行 {{ dateFormat(item.publishTime) }} 开始执行，{{
                        dateFormat(item.invalidTime)
                    }}
                      停止执行</span>
                    <span v-else>
                      周期执行 {{ dateFormat(item.publishTime) }} 至
                      {{ dateFormat(item.invalidTime) }} 期间内，{{
                          cycleTypeList[item.cycleType]
                      }}
                      {{ item.cycleValue
                      }}<span v-if="item.cycleType == '2'">号</span>
                      {{ item.cycleDayTime }} 执行，{{
                          `${item.limitCount == "0" ? "不限制" : "限制"}`
                      }}
                    </span>
                  </div>
                </div>
                <div class="card-right">
                  <div class="num">
                    {{ `${item.reachCount}/${item.enterCount}` }}
                  </div>
                  <div class="tip">累计触达/累计进入</div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MainContent>
</template>
<script lang="ts" setup>
import MarketingModelApi from "@/api/marketingModelApi.js";
import { dateFormat } from "@/utils/filters";
const router = useRouter();
const id = ref("");
const loading = ref(false);
const detailData = ref({ journeyStrategyEntityList: [] });
const titleList = ref([{ name: "开始" }, { name: "结束" }]);
const canvasList = ref([
  {
    id: "",
    name: "",
    status: "", // 画布状态
    startType: "", // 画布开启时间形式
    reachCount: String(0), // 触达
    enterCount: String(0), // 进入
    publishTime: String(new Date().getTime()), // 发布时间
    invalidTime: "", // 结束时间
    cycleType: "", // 周期的值
    cycleValue: "", // 周期类型
    cycleDayTime: "", // 周期的时间点
    limitCount: "", // 限制每个用户流程进入次数 0为不限制
  },
]);
const cycleTypeList = ref([
  { id: 2, name: "每月" },
  { id: 3, name: "每日" },
  { id: 7, name: "每周" },
]);
const itemIndex = ref(1)
const headerContent = ref(null)
const setCanvasList = (e: any, item: any, index: any) => {
  let offSetLeftwidth = headerContent.value.clientWidth - e.target.clientWidth - e.target.offsetLeft
  let offSetRightwidth = e.target.offsetLeft - headerContent.value.clientWidth - e.target.clientWidth
  let scrollTransitionWidth = 0
  let boxWidth = (headerContent.value.clientWidth - e.target.clientWidth) / 2

  if (offSetLeftwidth < 0) {

   

    if (index > itemIndex.value) {
       
        // scrollTransitionWidth += boxWidth
        headerContent.value.scrollLeft = headerContent.value.scrollLeft + boxWidth
      } 
        
        // if (offSetRightwidth > 0) {
         
        // } else {
          
          // headerContent.value.scrollLeft = headerContent.value.scrollLeft + boxWidth
      
    }


      if(index < itemIndex.value) {
          headerContent.value.scrollLeft = headerContent.value.scrollLeft - e.target.clientWidth
      }

  // if(index > 2) {
  // console.log('e.offsetLeft', e.target.offsetLeft);
  // console.log('e.offsetRight', e.target.offsetRight);
  // console.log('e.clientWidth', e.target.clientWidth);
  // console.log('headerContent.value', headerContent.value.target);
  // console.log('headerContent.value', headerContent.value.clientWidth);
  // console.log('headerContent.value',headerContent.value.scrollWidth);
  //   // headerContent.value.scrollLeft = 1400
  // }
  itemIndex.value = index
  canvasList.value = item.canvasList;
};

const getMarketingModelDetail = async () => {
  loading.value = true;
  let rs = await MarketingModelApi.getMarketingModelDetail({
    id: id.value,
  });
  if (rs.code === 200) {
    detailData.value = rs.payload;
    console.log("detailData.value", detailData.value);
    titleList.value = [
      { name: "开始" },
      ...detailData.value.journeyStrategyEntityList,
      { name: "结束" },
    ];
    canvasList.value = rs.payload.journeyStrategyEntityList[0].canvasList;
  }
  loading.value = false;
};
const getDay = (time: any) => {
  const nowDate = new Date().getTime();
  const day = (nowDate - time) / 1000 / 60 / 60 / 24;
  return Math.floor(day);
};
onMounted(() => {
  id.value = String(router.currentRoute.value.params.id);
  getMarketingModelDetail();
});
</script>

<style lang="scss" scoped>
.model-header {
  width: 100%;
  height: 44px;
  background: #FFF;
  position: relative;

  .header-content {
    overflow-x: scroll;
    height: 44px;
    // background: #f5f7fa;
    border-radius: 4px;
    white-space: nowrap;

    // position: absolute;
    // margin: 0 20px;
    // padding: 0 20px;

    .content-item {
      display: inline-block;

      // vertical-align: middle;
      .item {
        display: inline-block;
        font-size: 16px;
        background: #F5F7FA;
        padding: 8px 16px;
        border-radius: 22px;
        border: 1px solid #A5BDE2;
        color: #001e70;
        cursor: pointer;
        vertical-align: middle;
      }

      .activity {
        background: var(--el-color-primary);
        color: #fff;
      }

      .item-icon {
        vertical-align: middle;
        // display: inline-block;
        width: 20px;
        margin: 0 20px;
        color: #606266;
      }
    }
  }
}

.header-content::-webkit-scrollbar {
  display: none
}

.model-content {
  background: #fff;

  .content-box {
    margin-top: 20px;

    .content-title {
      margin-bottom: 16px;

      .icon-left {
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #3e61a9;
        border-radius: 1px;
        vertical-align: middle;
        margin-right: 8px;
      }

      .title {
        vertical-align: middle;
        font-size: 16px;
        font-weight: 500;
        color: #1d2129;
      }
    }

    .el-card {
      cursor: pointer;

      :deep(.el-card__body) {
        display: flex;
        justify-content: space-between;
      }

      .card-left {
        .top-name {
          display: inline-block;
          line-height: 24px;
          font-size: 16px;
          font-weight: 500;
          color: #1d2129;
          margin-right: 8px;
          // background: #303133;
        }

        .el-tag {
          width: 68px;
          height: 20px;
          line-height: 20px;
          border-radius: 2px;

          .tag-img {
            width: 12px;
            height: 12px;
            vertical-align: middle;
            margin: -2px 4px 0 0;
          }

          span {
            vertical-align: middle;
          }
        }

        .bottom {
          // background: #001e70;
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #606266;
          line-height: 20px;
        }
      }

      .card-right {
        margin-right: 80px;
        min-width: 120px;

        .num {
          font-size: 20px;
          font-weight: 500;
          color: #303133;
          line-height: 24px;
        }

        .tip {
          font-size: 14px;
          color: #909399;
          line-height: 20px;
        }
      }
    }
  }
}
.el-card-box {
  margin-bottom: 20px;
}
</style>